<template>
  <div class="usermessage">
    <!-- {{this.$store.state.user.userInfo}} -->
    <div class="userInfo">
      <span>欢迎,{{ $store.state.user.userInfo.name }}</span>
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xiaolian"></use>
      </svg>
    </div>
    <div class="btn">
      <button @click="changeUser($store.state.user.userInfo.email)">修改信息</button>
      <button @click="loginOut">登出</button>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      
    };
  },
  methods: {
    loginOut: function () {
    //   console.log("登出");
      let loginOutMes = {
        isLogin: false,
        userInfo: {},
      };
      this.$store.commit("setUser", loginOutMes);
      localStorage.user = JSON.stringify(loginOutMes);
      // console.log(this.$store.state.user.userInfo);
      this.$router.push("/login");
    },
    changeUser:function(email){
      this.$router.push({name:'changeUser', params: { email: email }});
      // console.log(email);
    }
  },
  mounted: async function () {},
};
</script>

<style lang="less">
.usermessage {
  width: 6rem;
  min-height: 3rem;
  background-color: white;
  border-radius: 0.4rem;
  box-shadow: 0rem 0rem 0.15rem 0rem rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  //   align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  .userInfo {
    margin-bottom: 0.5rem;
    padding: 0 0.7rem 0 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #192a56;
    font-weight:  bold;
    letter-spacing: 0.1rem;
    span{
      width: 4rem;
      // height: 0.6rem;
      overflow:hidden;
      text-overflow: ellipsis;
    }
    .icon {
      padding-top: 0.02rem;
      width: 0.5rem;
      height: 0.5rem;
      fill: #192a56;
    }
  }
  .btn {
    display: flex;
    justify-content: space-between;
    padding: 0 0.7rem;
    button {
      width: 2rem;
      height: 0.8rem;
      border: none;
      border-radius: 0.5rem;
      box-shadow: 0rem 0rem 0.2rem 0.05rem rgba(0, 0, 0, 0.1);
      color: white;
      font-size: 0.3rem;
      letter-spacing: 0.04rem;
      padding-left: 0.04rem;
      outline: none;
      &:first-child {
        background-color: #7688ba;
      }
      &:last-child {
        background-color: #5d76ba;
      }
    }
  }
}
</style>